<template>
 <div class="plantBox">
    <!-- 价格趋势 -->
     <div style="width: 100%;height: 100%;" ref="saleEchart"></div>
     <dv-loading v-if="loading" style="color: #fff;position: absolute;">Loading...</dv-loading>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
    props:{values:Object},
    data() {
        return {
            loading:false,
            dataInfo:{},
        }
    },
    mounted() {
        // console.log(this.values)
        this.getSaleeCharts()
    },
    watch:{
        values: {
            handler(newValue) {
              this.getSaleeCharts()
            },
            deep: true
        }
    },
    methods:{
          //销售产量弹窗echart
    async getSaleeCharts() {
      this.loading = true
      let { data: res } = await this.$https.get('plant/iot/getPrice', { params: this.values })
      // console.log(res)
      if (res.code != '200') return this.$notify.error({
        title: '错误',
        message: '网络服务器错误'
      });

      let optionData = res.data
      let myChart = echarts.getInstanceByDom(this.$refs.saleEchart);
      if (myChart == undefined) {
        myChart = echarts.init(this.$refs.saleEchart);
      }
      optionData.forEach(v => {
        v.data.sort((a, b) => a.time.localeCompare(b.time));
      })
      let times = []
      let serieData = []
      let names = []

      if (res.data.length <= 0) return myChart.clear()
      times = optionData[0].data.map(v => { return v.time })
      names = optionData.map(v => { return v.name })
      optionData.forEach(v => {
        let data = v.data.map(m => { return m.value })
        serieData.push(
          {
            name: v.name,
            type: 'line',
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              shadowColor: '#fff',
              shadowBlur: 10
            },
            label: {
              show: false,
              position: 'right',
              color: '#fff'
            },
            emphasis: {
              focus: 'series'
            },
            data: data
          }
        )
      })

      let option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(13, 64, 71, 0.50)',
          borderColor: 'rgba(143, 225, 252, 0.60)',
          padding: 8,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          formatter: function (params, ticket, callback) {
            var htmlStr = "";
            for (var i = 0; i < params.length; i++) {
              var param = params[i];
              var seriesName = param.seriesName; //图例名称
              var value = param.value; //y轴值
              var color = param.color; //图例颜色
              htmlStr += "<div>";
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                color +
                ';"></span>'; //一个点
              htmlStr += `<span style="color:${color}">${seriesName} : ${value}元/斤</span>`; //圆点后面显示的文本
              // console.log(seriesName, value);
              htmlStr += "</div>";
            }
            return htmlStr;
          },
        },
        legend: {
          data: names,
          icon: 'circle',
          orient: 'vertical', //图例方向【horizontal/vertical】
          itemWidth: 12,
          itemHeight: 12,
          top: 20,
          right: 15,
          itemStyle: {
            shadowColor: '#fff',
            shadowBlur: 10
          },
          textStyle: {
            color: '#fff',
            fontSize: 14,
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          name: this.dataInfo.type,
          color: '#fff',
          type: 'category',
          axisLine: { show: true, lineStyle: { color: 'rgba(116, 199, 179,.4)' } },
          axisLabel: { interval: 'auto', color: '#fff', fontSize: 12 },
          axisTick: { show: false },
          data: times
        },
        //  // 缩放平移组件
        //  dataZoom: [
        //     {
        //         type: 'inside',  //slider有滑块，inside内置
        //         disabled: false,  //是否停止组件功能
        //         xAxisIndex: 0,  //x轴,可以用数组表示多个轴
        //         zoomLock: true,  //是否锁定区域大小（true,只能平移不能缩放）
        //         preventDefaultMouseMove: false,
        //         filterMode: "empty",
        //         startValue: 16,  //一行有几个（起始数组下标）
        //         endValue: 6,    //一行有几个（结束数组下标）
        //         start: null,
        //         end: null,
        //     },
        // ],
        yAxis: {
          name: "单价",
          color: '#fff',
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(116, 199, 179,.4)',
              type: 'dashed'
            },
          },
          axisLabel: {
            color: '#FFFFFF',  //更改坐标轴文字颜色
            fontSize: 12     //更改坐标轴文字大小
          },
          axisLine: { show: true, lineStyle: { color: 'rgba(116, 199, 179,.4)' } },
        },
        series: serieData
      };
      myChart.setOption(option)
      this.loading = false
    },
    }
}
</script>
<style lang="less" scoped>
.plantBox{
    width: 100%;
    height: 100%;

}

</style>